<template>
	<div>
		<div>
			<span><i class="el-icon-search el-icon--right"></i> 筛选查询</span>
			&nbsp;&nbsp;
			登记时间:
			<el-date-picker v-model="issuePageForm.startCreateTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
				style="width: 150px;">
			</el-date-picker>~
			<el-date-picker v-model="issuePageForm.endCreateTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
				style="width: 150px;">
			</el-date-picker>
			&nbsp;&nbsp;
			项目:
			<el-select v-model="issuePageForm.projectId" placeholder="请选择" style="width: 100px;" clearable>
				<el-option v-for="item in project" :key="item.projectId" :label="item.projectName"
					:value="item.projectId">
				</el-option>
			</el-select>
			&nbsp;&nbsp;
			状态:
			<el-select v-model="issuePageForm.issueState" placeholder="请选择" style="width: 100px;" clearable>
				<el-option v-for="item in states" :key="item.stateCode" :label="item.stateDesc" :value="item.stateDesc">
				</el-option>
			</el-select>
			&nbsp;&nbsp;
			<el-button @click="findList()">查询<i class="el-icon-search el-icon--right"></i></el-button>
			<el-button @click="addissueRecord">新增<i class="el-icon-plus el-icon--right"></i></el-button>
			<el-button>删除<i class="el-icon-delete el-icon--right"></i></el-button>
		</div>
		<!-- 新增 -->
		<div>
			<el-dialog title="新增项目缺陷" :visible.sync="outerVisible" width="400px">
				<div>
					<el-form ref="addform" :model="createIssueForm" label-width="80px" :rules="addFormRules">
						<el-form-item label="项目名称" prop="projectId">
							<el-select v-model="createIssueForm.projectId" placeholder="请选择" clearable>
								<el-option v-for="item in project" :key="item.projectId" :label="item.projectName"
									:value="item.projectId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="父级缺陷" prop="parentIssueName">
							<el-select v-model="createIssueForm.parentIssueId" placeholder="请选择" clearable>
								<el-option v-for="item in issueList" :key="item.issueId" :label="item.issueName"
									:value="item.issueId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="缺陷名称" prop="issueName">
							<el-input v-model="createIssueForm.issueName"></el-input>
						</el-form-item>
						<el-form-item label="缺陷描述" prop="issueDesc">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="createIssueForm.issueDesc">
							</el-input>
						</el-form-item>
						<el-form-item label="完成要求" prop="doneCondition">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="createIssueForm.doneCondition">
							</el-input>
						</el-form-item>
						<el-form-item label="缺陷分类" prop="issueType">
							<el-select v-model="createIssueForm.issueType" placeholder="请选择" clearable>
								<el-option v-for="item in allType" :key="item.typeId" :label="item.typeDesc"
									:value="item.typeDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="严重程度" prop="issueSeverity">
							<el-select v-model="createIssueForm.issueSeverity" placeholder="请选择" clearable>
								<el-option v-for="item in severitys" :key="item.severityId" :label="item.severityDesc"
									:value="item.severityDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="优先级" prop="issuePriority">
							<el-select v-model="createIssueForm.issuePriority" placeholder="请选择" clearable>
								<el-option v-for="item in prioritys" :key="item.priorityId" :label="item.priorityDesc"
									:value="item.priorityDesc" :auto-upload="false">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="预计工时" prop="planWorkHours">
							<el-input v-model="createIssueForm.planWorkHours"></el-input>
						</el-form-item>
						<el-form-item label="计划开始时间" label-width="110px" prop="planStartTime">
							<el-date-picker v-model="createIssueForm.planStartTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="计划结束时间" label-width="110px" prop="planEndTime">
							<el-date-picker v-model="createIssueForm.planEndTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="附件上传">
							<el-upload class="upload-demo" ref="upload" action="http://localhost:8080/issueAttach/upload"
								multiple :limit="3" name="file" :on-success="success">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
            <el-form-item label="附件描述">
            	<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
            		v-model="createIssueForm.attachDesc">
            	</el-input>
            </el-form-item>
					</el-form>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="outerVisible = false">取 消</el-button>
					<el-button type="primary" @click="addpro">确定</el-button>
				</div>
			</el-dialog>
		</div>
		<div>
			<el-table ref="multipleTable" :data="issueList" tooltip-effect="dark" style="width: 100%"
				@selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="issueId" label="编号">
				</el-table-column>
				<el-table-column prop="projectName" label="项目名称">
				</el-table-column>
				<el-table-column prop="issueName" label="缺陷名称" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="parentIssueName" label="父缺陷">
					<template slot-scope="scope">
						<span>{{scope.row.parentIssueName==null?'':scope.row.parentIssueName}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="issuePriority" label="优先级">
				</el-table-column>
				<el-table-column prop="issueSeverity" label="严重程度">
				</el-table-column>
				<el-table-column prop="issueType" label="缺陷类别">
				</el-table-column>
				<el-table-column prop="issueState" label="状态">
				</el-table-column>
				<el-table-column prop="assignee" label="指派">
					<template slot-scope="scope">
						<span>{{scope.row.assignee==null?'暂未指派':scope.row.assignee}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="planEndTime" label="计划完成时间">
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<div v-if="scope.row.assignee==null">
							<el-button @click="editById(scope.row.issueId)" type="text" size="small">编辑</el-button>
							<el-button type="text" size="small" @click="deleteIssueById(scope.row.issueId)">删除
							</el-button>
						</div>
						<div v-if="scope.row.assignee!=null">
							<el-button type="text" size="small" @click="getIssueById(scope.row.issueId)">查看
							</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<!-- 查看 -->
			<el-dialog title="查看缺陷" :visible.sync="LookMessage" width="25%">

				<el-form ref="form" :model="issueMessage" label-width="150px">
					<el-form-item label="项目名称:">
						<span>{{issueMessage.projectName}}</span>
					</el-form-item>
					<el-form-item label="父级缺陷:">
						<span>{{issueMessage.parentissueName==null?'无':issueMessage.parentissueName}}</span>
					</el-form-item>
					<el-form-item label="缺陷名称:">
						<span>{{issueMessage.issueName}}</span>
					</el-form-item>
					<el-form-item label="缺陷分类:">
						<span>{{issueMessage.issueType}}</span>
					</el-form-item>
					<el-form-item label="状态:">
						<span>{{issueMessage.issueState}}</span>
					</el-form-item>
					<el-form-item label="严重程度:">
						<span>{{issueMessage.issueSeverity}}</span>
					</el-form-item>
					<el-form-item label="优先级:">
						<span>{{issueMessage.issuePriority}}</span>
					</el-form-item>
					<el-form-item label="预期工时:">
						<span>{{issueMessage.planWorkHours}}</span>
					</el-form-item>
					<el-form-item label="完成率:">
						<span>{{issueMessage.doneRatio}}%</span>
					</el-form-item>
					<el-form-item label="计划开始时间:">
						<span>{{issueMessage.planStartTime}}</span>
					</el-form-item>
					<el-form-item label="计划结束时间:">
						<span>{{issueMessage.planEndTime}}</span>
					</el-form-item>
					<el-form-item label="缺陷描述:">
						<span>{{issueMessage.issueDesc}}</span>
					</el-form-item>
					<el-form-item label="缺陷要求:">
						<span>{{issueMessage.doneCondition}}</span>
					</el-form-item>
					<el-form-item label="附件下载:">
              <el-button type="text" @click="downFile()">下载附件</el-button>
					</el-form-item>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="LookMessage = false">关 闭</el-button>
				</span>
			</el-dialog>
			<!-- 修改 -->
			<el-dialog title="修改项目缺陷" :visible.sync="editVisible" width="400px">
				<div>
					<el-form ref="form" :model="modifyIssueForm" label-width="80px">
						<el-form-item label="项目名称">
							<el-select v-model="modifyIssueForm.projectName" placeholder="请选择" clearable>
								<el-option v-for="item in project" :key="item.projectId" :label="item.projectName"
									:value="item.projectName">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="父级缺陷">
							<el-select v-model="modifyIssueForm.parentIssueId" placeholder="请选择" clearable>
								<el-option v-for="item in issueList" :key="item.issueId" :label="item.issueName"
									:value="item.issueId">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="缺陷名称">
							<el-input v-model="modifyIssueForm.issueName"></el-input>
						</el-form-item>
						<el-form-item label="缺陷描述">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="modifyIssueForm.issueDesc">
							</el-input>
						</el-form-item>
						<el-form-item label="完成要求">
							<el-input type="textarea" :autosiz="{ minRows: 2, maxRows: 6 }" placeholder="请输入内容"
								v-model="modifyIssueForm.doneCondition">
							</el-input>
						</el-form-item>
						<el-form-item label="缺陷分类">
							<el-select v-model="modifyIssueForm.issueType" placeholder="请选择" clearable>
								<el-option v-for="item in allType" :key="item.typeId" :label="item.typeDesc"
									:value="item.typeDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="严重程度">
							<el-select v-model="modifyIssueForm.issueSeverity" placeholder="请选择" clearable>
								<el-option v-for="item in severitys" :key="item.severityId" :label="item.severityDesc"
									:value="item.severityDesc">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="优先级">
							<el-select v-model="modifyIssueForm.issuePriority" placeholder="请选择" clearable>
								<el-option v-for="item in prioritys" :key="item.priorityId" :label="item.priorityDesc"
									:value="item.priorityDesc" :auto-upload="false">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="预计工时">
							<el-input v-model="modifyIssueForm.planWorkHours"></el-input>
						</el-form-item>
						<el-form-item label="计划开始时间" label-width="100px">
							<el-date-picker v-model="modifyIssueForm.planStartTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="计划结束时间" label-width="100px">
							<el-date-picker v-model="modifyIssueForm.planEndTime" type="date" placeholder="选择日期">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="重新上传附件">
							<el-upload class="upload-demo" ref="upload" action="http://localhost:8080/issueAttach/upload"
								multiple :limit="3" name="file" :on-success="reupload">
								<el-button size="small" type="primary">点击上传</el-button>
							</el-upload>
						</el-form-item>
					</el-form>

				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="editVisible = false">取 消</el-button>
					<el-button type="primary" @click="changeRecord">确定</el-button>
				</div>
			</el-dialog>



			<div id="DS-Bottom">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="pageInfo.current" :page-sizes="[3, 5, 7, 10]" :page-size="pageInfo.size"
					layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "issuelist",
		data() {
			return {
				issuedesc: "",
				project: [],
				multipleSelection: [],
				severitys: [],
				prioritys: [],
				allProject: [],
				allType: [],
				createIssueForm: {
					projectName: "",
					doneCondition: "",
					parentIssueId: "",
					issueName: "",
					issueType: "",
					issueDesc: "",
					issuePriority: "",
					issueSeverity: "",
					planWorkHours: "",
					planStartTime: "",
					planEndTime: "",
          attachDesc:"",
          attachFile:"",
          fileSize:"",
          mimeType:"",
          isPic:"",
          logState:"",
          fileUrl:"",
				},
        modifyIssueForm: {
        	projectName: null,
        	doneCondition: null,
        	parentIssueId: null,
        	issueName: null,
        	issueType: null,
        	issueDesc: null,
        	issuePriority: null,
        	issueSeverity: null,
        	planWorkHours: null,
        	planStartTime: null,
        	planEndTime: null,
          attachDesc:null,
          attachFile:null,
          fileSize:null,
          mimeType:null,
          isPic:null,
          logState:null,
          fileUrl:null,
        },
				states: [],
				outerVisible: false,
				issueList: [],
				pageInfo: {},
				LookMessage: false,
				issueMessage: {},
				editMessage: {},
				editVisible: false,
        issuePageForm:{
          current:1,
          size:10,
          startCreateTime:null,
          endCreateTime:null,
          issueState:null,
          projectId:null,
        },
        addFormRules:{
          projectId:[{ required: true, message: '请选择项目', trigger: 'change' }],
          issueName:[{ required: true, message: '请输入缺陷名', trigger: 'blur' }],
          issueDesc:[{ required: true, message: '请输入缺陷描述', trigger: 'blur' }],
          doneCondition:[{ required: true, message: '请输入完成要求', trigger: 'blur' }],
          issueType:[{ required: true, message: '请选择缺陷类别', trigger: 'blur' }],
          issueSeverity:[{ required: true, message: '请选择严重程度', trigger: 'change' }],
          issuePriority:[{ required: true, message: '请选择优先级', trigger: 'change' }],
          planWorkHours:[{ required: true, message: '请输入预计工时', trigger: 'blur' }],
          planStartTime:[{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
          planEndTime:[{ required: true, message: '请选计划结束时间', trigger: 'change' }]
        }
			}
		},
		methods: {
			downFile() {
				this.$http.get("/issueAttach/download",{params:{attachId:this.issueMessage.attachId}}).then(resp=>{
          if (resp.data.code == 200) {
          	this.$message({
          		message: resp.data.msg,
          		type: 'success',
          		duration: 1000
          	});
          }
        })
			},
			changeRecord() {
				this.$http.post("/issueBaseInfo/change", this.modifyIssueForm).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.msg,
							type: 'success',
							duration: 1000
						});
						this.editVisible = false;
						this.findList();
					}
				});
			},
			editById(issueId) {
				this.editVisible = true;
				this.$http.get("/issueBaseInfo/getIssue", {params:{issueId: issueId}}).then(resp => {
					this.modifyIssueForm.projectId = resp.data.data.projectId;
					this.modifyIssueForm.doneCondition = resp.data.data.doneCondition;
					this.modifyIssueForm.parentIssueId = resp.data.data.parentIssueId;
					this.modifyIssueForm.issueName = resp.data.data.issueName;
					this.modifyIssueForm.issueType = resp.data.data.issueType;
					this.modifyIssueForm.issueDesc = resp.data.data.issueDesc;
					this.modifyIssueForm.issuePriority = resp.data.data.issuePriority;
					this.modifyIssueForm.issueSeverity = resp.data.data.issueSeverity;
					this.modifyIssueForm.planWorkHours = resp.data.data.planWorkHours;
					this.modifyIssueForm.planStartTime = resp.data.data.planStartTime;
					this.modifyIssueForm.planEndTime = resp.data.data.planEndTime;
					this.modifyIssueForm.attachDesc = resp.data.data.attachDesc;
				});
			},

			deleteIssueById(issueId) {
				this.$http.get("/issueBaseInfo/deletion", {params:{issueId:issueId}}).then(resp => {
					if (resp.data.code == 200) {
						this.$message({
							message: resp.data.msg,
							type: 'success',
							duration: 1000
						});
						this.findList();
					}
				});
			},

			getIssueById(issueId) {
				this.LookMessage = true;
				this.$http.get("/issueBaseInfo/getIssue", {params:{issueId: issueId}}).then(resp => {
          this.issueMessage = resp.data.data;
				});
			},

			handleSizeChange(val) {
				this.issuePageForm.size = val;
				this.getIssueList();

			},

			handleCurrentChange(val) {
				this.issuePageForm.current = val;
				this.getIssueList();
			},

			handleSelectionChange(val) {
				this.multipleSelection = val;
			},

			success(resp) {
        if(resp.code == 200){
          this.$message({
          	message: resp.msg,
          	type: 'success',
          	duration: 1000
          });
          this.createIssueForm.attachFile = resp.data.attachFile;
          this.createIssueForm.fileSize = resp.data.fileSize;
          this.createIssueForm.mimeType = resp.data.mimeType;
          this.createIssueForm.isPic = resp.data.isPic;
          this.createIssueForm.logState = resp.data.logState;
          this.createIssueForm.fileUrl = resp.data.fileUrl;
        }
			},
      reupload(resp) {
        if(resp.code == 200){
          this.$message({
          	message: resp.msg,
          	type: 'success',
          	duration: 1000
          });
          this.modifyIssueForm.attachFile = resp.data.attachFile;
          this.modifyIssueForm.fileSize = resp.data.fileSize;
          this.modifyIssueForm.mimeType = resp.data.mimeType;
          this.modifyIssueForm.isPic = resp.data.isPic;
          this.modifyIssueForm.logState = resp.data.logState;
          this.modifyIssueForm.fileUrl = resp.data.fileUrl;
        }
      },

			addpro() {
        this.$refs.addform.validate((valid) => {
          if (valid) {
            this.$http.post("/issueBaseInfo/createIssue", this.createIssueForm).then(resp => {
            	this.$message({message: resp.data.msg,type: 'success',duration: 1000});
            	this.createIssueForm.projectId = null;
            	this.createIssueForm.doneCondition = null;
            	this.createIssueForm.parentIssueId = null;
            	this.createIssueForm.issueName = null;
            	this.createIssueForm.issueType = null;
            	this.createIssueForm.issueDesc = null;
            	this.createIssueForm.issuePriority = null;
            	this.createIssueForm.issueSeverity = null;
            	this.createIssueForm.planWorkHours = null;
            	this.createIssueForm.planStartTime = null;
            	this.createIssueForm.planEndTime = null;
              this.createIssueForm.attachDesc = null;
            	this.outerVisible = false;
            	this.getIssueList();
            });
          }
        });
			},

			addissueRecord() {
				this.outerVisible = true;
			},

			findList() {
				this.getIssueList();
			},

			getIssueList() {
				this.$http.post("/issueBaseInfo/issueList", this.issuePageForm).then(resp => {
					this.pageInfo = resp.data.data;
					this.issueList = resp.data.data.records;
				});
			},

			getInfo() {
				this.$http.post("/issueState/findAllStateList",{pageIndex:1,pageSize:99}).then(resp => {
					this.states = resp.data.data.records;
				});
        this.$http.get("/infoIssueProject/getProjectPage",{params:{pageInde:1,pageSize:99}}).then(resp => {
        	this.project = resp.data.data.records;
        });
        this.$http.post("/issueType/findAllTypeList",{pageIndex:1,pageSize:99}).then(resp => {
        	this.allType = resp.data.data.records;
        });
        this.$http.post("/issueSeverity/findAllSeverityList",{pageIndex:1,pageSize:99}).then(resp=>{
          this.severitys = resp.data.data.records;
        });
        this.$http.post("/issuePriority/findAllPriorityList",{pageIndex:1,pageSize:99}).then(resp=>{
          this.prioritys = resp.data.data.records;
        });
			}
		},
		created() {
			this.getIssueList();
			this.getInfo();
		}
	}
</script>

<style>
	#DS-Bottom {
		position: absolute;
		text-align: right;
		bottom: 0;
		height: 35px;
		left: 0;
		right: 0;
	}
</style>
